// 公用混合
@mixin paddingLeft($length:15px) {
  padding-left: $length;
}
@mixin marginTop($length:10px) {
  margin-top: $length;
}
// about页面
%about-line-title{ //每行标题栏样式
	margin: 20px 0;
	height: 45px;
	line-height: 40px;
	width: 100vw;
	border-left: 4px solid #00a67c;
	font-size: 21px;
	font-weight: 600;
	text-align: center;
	box-sizing: border-box;
}

%about-text{ //个性签名样式
	line-height: 33px;
	font-size: 18px;
	font-weight: 500;
}

// 动画
//左右摇摆动画
$rock-rotate10:rotate(1.57deg);
$rock-rotate20:rotate(-1.77deg);
$rock-rotate30:rotate(1.4deg);
$rock-rotate40:rotate(-1.3deg);
$rock-rotateEnd:rotate(0deg);
$rock-during:3s;
$rock-timing:linear;
$rock-iteration-count:infinite;
@-webkit-keyframes rock {
  10% {
    transform: $rock-rotate10;
  }

  20% {
    transform: $rock-rotate20;
  }

  30% {
    transform: $rock-rotate30;
  }

  40% {
    transform: $rock-rotate40;
  }

  50%,
  100% {
    transform: $rock-rotateEnd;
  }
}

@-moz-keyframes rock {
  10% {
    transform: $rock-rotate10;
  }

  20% {
    transform: $rock-rotate20;
  }

  30% {
    transform: $rock-rotate30;
  }

  40% {
    transform: $rock-rotate40;
  }

  50%,
  100% {
    transform: $rock-rotateEnd;
  }
}

@-o-keyframes rock {
  10% {
    transform: $rock-rotate10;
  }

  20% {
    transform: $rock-rotate20;
  }

  30% {
    transform: $rock-rotate30;
  }

  40% {
    transform: $rock-rotate40;
  }

  50%,
  100% {
    transform: $rock-rotateEnd;
  }
}

@keyframes rock {
  10% {
    transform: $rock-rotate10;
  }

  20% {
    transform: $rock-rotate20;
  }

  30% {
    transform: $rock-rotate30;
  }

  40% {
    transform: $rock-rotate40;
  }

  50%,
  100% {
    transform: $rock-rotateEnd;
  }
}
%rock{
  animation: rock $rock-during $rock-timing $rock-iteration-count;
  -moz-animation: rock $rock-during $rock-timing $rock-iteration-count;
  -webkit-animation: rock $rock-during $rock-timing $rock-iteration-count;
  -o-animation: rock $rock-during $rock-timing $rock-iteration-count;
}

.common-rock{
	@extend %rock;
}

//左右摇摆动画-激烈
$rock-intense-rotate10:rotate(15.27deg) scale(1.08);
$rock-intense-rotate20:rotate(-10.97deg) scale(0.95);
$rock-intense-rotate30:rotate(8.7deg) scale(1.11);
$rock-intense-rotate40:rotate(-7.6deg) scale(0.98);
$rock-intense-rotateEnd:rotate(0deg) scale(1);
$rock-intense-during:3s;
$rock-intense-timing:linear;
$rock-intense-iteration-count:infinite;
@-webkit-keyframes rock {
  10% {
    transform: $rock-intense-rotate10;
  }

  20% {
    transform: $rock-intense-rotate20;
  }

  30% {
    transform: $rock-intense-rotate30;
  }

  40% {
    transform: $rock-intense-rotate40;
  }

  50%,
  100% {
    transform: $rock-intense-rotateEnd;
  }
}

@-moz-keyframes rock-intense {
  10% {
    transform: $rock-intense-rotate10;
  }

  20% {
    transform: $rock-intense-rotate20;
  }

  30% {
    transform: $rock-intense-rotate30;
  }

  40% {
    transform: $rock-intense-rotate40;
  }

  50%,
  100% {
    transform: $rock-intense-rotateEnd;
  }
}

@-o-keyframes rock-intense {
  10% {
    transform: $rock-intense-rotate10;
  }

  20% {
    transform: $rock-intense-rotate20;
  }

  30% {
    transform: $rock-intense-rotate30;
  }

  40% {
    transform: $rock-intense-rotate40;
  }

  50%,
  100% {
    transform: $rock-intense-rotateEnd;
  }
}

@keyframes rock-intense {
  10% {
    transform: $rock-intense-rotate10;
  }

  20% {
    transform: $rock-intense-rotate20;
  }

  30% {
    transform: $rock-intense-rotate30;
  }

  40% {
    transform: $rock-intense-rotate40;
  }

  50%,
  100% {
    transform: $rock-intense-rotateEnd;
  }
}
%rock-intense{
  animation: rock-intense $rock-intense-during $rock-intense-timing $rock-intense-iteration-count;
  -moz-animation: rock-intense $rock-intense-during $rock-intense-timing $rock-intense-iteration-count;
  -webkit-animation: rock-intense $rock-intense-during $rock-intense-timing $rock-intense-iteration-count;
  -o-animation: rock-intense $rock-intense-during $rock-intense-timing $rock-intense-iteration-count;
}

.common-rock-intense{
	@extend %rock-intense;
}


// 摇摆缩放
@keyframes animate {
  0%,
  50%,
  100% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(4deg) scale(0.98);
  }

  75% {
    transform: rotate(-4deg) scale(1.02);
  }
}
%rock-scale{
  animation: animate 0.5s linear infinite both;
}


// 下雪特效
@-webkit-keyframes weather {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 1024px;
  }
}
@keyframes weather {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 0 1024px;
  }
}
@-webkit-keyframes weather2 {
  from {
    background-position: 64px 64px;
  }

  to {
    background-position: 64px 1088px;
  }
}
@keyframes weather2 {
  from {
    background-position: 64px 64px;
  }

  to {
    background-position: 64px 1088px;
  }
}
